<template>
  <div class="app-container">
    <div class="myglobal-content">
      <div style="height:100%;background:#fff;position:relative;margin-left: 16px;margin-right: 16px;margin-top: 16px;">
        <div ref="tabledivRef" class="tablediv">
          <div class="msg_item" :class="{itemBox:configData.lockedIsEnable}">
            <div class="msgtitle">
              <div>
                <span>强制账号锁定</span>
                <el-switch
                  v-model="configData.lockedIsEnable"
                  style="margin-left:16px;margin-right:24px"
                />
              </div>
              <el-button v-permission="['AUTHPOLICY_SAVECONFIG_BUTTON']" type="primary" style="margin-right: 24px;"
                         :loading="isLoading" @click="saveConfig">保存配置</el-button>
            </div>
            <div v-show="configData.lockedIsEnable" class="lockBox" unselectable="on">
              <!-- <div class="msgcontent msg_content_flex">
              <div class="msg_body">
                <span class="msg_company" style="margin-left:0;margin-right:12px">验证码限制</span>
                <el-input v-model="configData.limitTime" :class="{msg_error:!configData.limitTime}" :oninput="initPositiveInteger(5)" placeholder="" />
                <span class="msg_company" style="margin-right:12px">秒获取一次并且3小时内只能获取三次，超过次数提示</span>
                <el-input v-model="configData.errorTip" style="width:360px;" :class="{msg_error:!configData.errorTip}" placeholder="" />
              </div>
            </div> -->
              <div class="msgcontent msg_content_flex msg">
                <div class="msg_body">
                  <el-input v-model="configData.intervalTime" :class="{msg_error:!configData.intervalTime ||configData.intervalTime <= 0 }" :oninput="initPositiveInteger(5)"
                            placeholder="" />
                  <span class="msg_company" style="margin-right:12px">分钟内，登录失败</span>
                  <el-input v-model="configData.faileCount" :class="{msg_error:!configData.faileCount || configData.faileCount <= 0 }" :oninput="initPositiveInteger(5)"
                            placeholder="" />
                  <span class="msg_company" style="margin-right:12px">次账号自动锁定，</span>
                  <el-input v-model="configData.lockedTime" :class="{msg_error:!configData.lockedTime || configData.lockedTime <= 0 }" :oninput="initPositiveInteger(5)"
                            placeholder="" />
                  <span class="msg_company">分钟后自动解锁</span>
                </div>
              </div>
              <div class="msgcontent msg_content_flex msg">
                <div class="msg_label">锁定方式</div>
                <div class="msg_body">
                  <el-select v-model="configData.lockWay" class="select_lang" placeholder="请选择">
                    <el-option
                      v-for="dict in dict.type.AccountLockWay"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="msgcontent msg_content_flex msg">
                <div class="msg_label">是否通知本人</div>
                <div class="msg_body">
                  <div>
                    <el-select v-model="configData.lockedIsInform" placeholder="请选择">
                      <el-option
                        v-for="dict in dict.type.IsNoticePeople"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                    <span v-show="configData.lockedIsInform == 'Y'" style="margin: 0 12px;">通知方式</span>
                    <el-select v-show="configData.lockedIsInform == 'Y'" v-model="configData.informWay" placeholder="请选择">
                      <el-option
                        v-for="dict in dict.type.NoticeType"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </div>
                </div>
                <span v-show="configData.lockedIsInform == 'Y'" class="msg_tip">提示：账号锁定后，系统将按设置的通知方式通知用户。</span>
              </div>
              <div v-if="!configData.limitTime||!configData.errorTip||!configData.intervalTime || !configData.faileCount || !configData.lockedTime" class=" msg_error el-form-item__error">
                输入项不能为空
              </div>
              <div v-else-if="configData.intervalTime <= 0 || configData.faileCount <= 0 || configData.lockedTime <= 0" class=" msg_error el-form-item__error">
                数值必须大于0
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div style="width:100%;height:100%;background:#fff;position:relative;">
      <div ref="tabledivRef" class="tablediv">
        <div class="msg_item">
          <div class="msgtitle">
            <div>
              <span>是否需要滑块验证码</span>
              <el-switch
                v-model="configData.sliderVerification"
                style="margin-left:16px;margin-right:24px"
              />
            </div>
          </div>
        </div>
      </div>
    </div> -->
      <div style="height:100%;background:#fff;position:relative;margin-left: 16px;margin-right: 16px;">
        <div ref="tabledivRef" class="tablediv">
          <div class="msg_item">
            <div class="msgtitle">
              <span>登录认证方式</span>
            </div>
            <dt-table
              v-loading="loading"
              class="tableContent"
              :table-opts="tableOpts"
              :is-show-column="false"
            />
            <div v-if="configData.sysAuthRulesWayList.length < 2" class="btn">
              <el-button v-permission="['AUTHPOLICY_ADD_BUTTON']" type="primary" @click="addData">添加</el-button>
            </div>
            <div v-if="configData.sysAuthRulesWayList[0].authWayName == '' || (configData.sysAuthRulesWayList[1] && configData.sysAuthRulesWayList[1].authWayName == '')" class=" msg_error el-form-item__error">
              请输入认证类型名称
            </div>
            <div v-else-if="!configData.sysAuthRulesWayList[0].oneAuthWay || (configData.sysAuthRulesWayList[1] && !configData.sysAuthRulesWayList[1].oneAuthWay)" class=" msg_error el-form-item__error">
              请选择认证因子一
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</template>
<script>
import { positiveInteger } from '@/framework/utils/validate'
import configApi from '@/framework/api/authenticationCenter/authPolicy/authPolicy'
import _ from 'lodash'
// 导入loadsh插件
export default {
  name: 'AuthPolicy',
  dicts: ['AccountLockWay', 'IsNoticePeople', 'NoticeType', 'oneAuthWayList', 'twoAuthWayList'],
  data() {
    return {
      loading: false,
      // 遮罩层
      isLoading: false,
      configData: {
        authRuleId: '1234567890123456789', // 密码策略ID(默认1234567890123456789)
        authRuleCode: 'Default', // 密码策略编码（默认为Default）
        lockedIsEnable: 'Y', // 是否启用防暴力破解锁定(是-Y，否-N)
        faileCount: 30, // 失败几次锁定，当lockedIsEnable为Y时，必填。
        intervalTime: 6, // 暴力破解间隔时间(秒)，当lockedIsEnable为Y时，必填。
        lockedTime: 600, // 锁定时间(秒)，当lockedIsEnable为Y时，必填。
        otherRemindCount: 1,
        lockWay: '0', // 锁定方式（1-根据账号锁定，2-根据账号+IP锁定），当lockedIsEnable为Y时，必填。
        lockedIsInform: 'Y', // 用户锁定是否通知（Y-通知，N-不通知），当lockedIsEnable为Y时，必填。
        informWay: '1', // 通知方式（0-不通知，1-短信，2-邮件，3-其他，4-短信+邮件），当lockedIsInform为Y时，必填。
        limitTime: '60', // 获取验证码的时间
        errorTip: '操作频繁，请稍后再试！', // 超过次数提示
        authRuleName: '123', // 密码策略名称
        sliderVerification: 'Y',
        sysAuthRulesWayList: [
          {
            authRuleId: '1234567890123456789',
            authWayName: '账号密码登录',
            oneAuthWay: '1', // 认证因子1（0-无，1-账号密码，2-短信验证码，3-邮件验证码，4-图片验证码）
            twoAuthWay: '1', // 认证因子2（0-无，1-账号密码，2-短信验证码，3-邮件验证码，4-图片验证码）
            threeAuthWay: 1,
            fourAuthWay: 1,
            fiveAuthWay: 1,
            remark: 'ww'
          }
        ] // 认证方式
      },
      optionRow: {},
      isShowColumn: false,
      tableOpts: {
        rowKey: 'authWayId',
        firstTableCol: {
          select: false,
          width: 70
        },
        indexTableCol: {
          label: '序号',
          width: 70
        },
        tableCol: [
          {
            prop: 'authWayName',
            label: '认证类型名称',
            showOverflowTooltip: false,
            show: true,
            render: (h, param) => {
              return <el-input v-model={param.authWayName} placeholder="请输入" clearable></el-input>
            }
          },
          {
            prop: 'oneAuthWay',
            label: '认证因子一',
            showOverflowTooltip: false,
            show: true,
            render: (h, param) => {
              return h(
                'el-select',
                {
                  props: {
                    clearable: true,
                    value: param.oneAuthWay
                  },
                  on: {
                    change: (v) => {
                      param.oneAuthWay = v
                      this.$forceUpdate()
                    }
                  }
                },
                [
                  this.dict.type.oneAuthWayList.map((val) => {
                    return h(
                      'el-option',
                      {
                        props: {
                          value: val.value,
                          label: val.label
                        }
                      }
                    )
                  })
                ]
              )
            }
          },
          {
            prop: 'twoAuthWay',
            label: '认证因子二',
            showOverflowTooltip: false,
            show: true,
            render: (h, param) => {
              return h(
                'el-select',
                {
                  props: {
                    clearable: true,
                    value: param.twoAuthWay
                  },
                  on: {
                    change: (v) => {
                      param.twoAuthWay = v
                      this.$forceUpdate()
                    }
                  }
                },
                [
                  this.dict.type.twoAuthWayList.map((val) => {
                    return h(
                      'el-option',
                      {
                        props: {
                          value: val.value,
                          label: val.label
                        }
                      }
                    )
                  })
                ]
              )
            }
          },
          {
            prop: 'remark',
            label: '备注',
            showOverflowTooltip: false,
            show: true,
            render: (h, param) => {
              return <el-input type="textarea" v-model={param.remark} placeholder="请输入"></el-input>
            }
          }
        ],
        operator: {
          fixed: 'right',
          align: 'center',
          width: 90,
          operatorBtn: [
            {
              text: '删除',
              permission: ['AUTHPOLICY_DEL_BUTTON'],
              type: 'danger',
              click: (row, col, index) => {
                return this.delData(index)
              }
            }
          ]
        },
        tableData: []
      },
      tableIndex: 1,
      isError: true
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      this.loading = true
      const { data } = await configApi.getAuthRules()
      this.configData = data
      this.tableOpts.tableData = this.configData.sysAuthRulesWayList
      this.configData.lockedIsEnable = this.dealYN(data.lockedIsEnable)
      this.configData.sliderVerification = this.dealYN(data.sliderVerification)
      this.configData.intervalTime = parseInt(data.intervalTime / 60)
      this.configData.lockedTime = parseInt(data.lockedTime / 60)
      this.loading = false
    },
    async  saveConfig() {
      this.configData.sysAuthRulesWayList.forEach((res) => {
        res.isCheck = false
        res.isCheck1 = false
      })
      await this.$nextTick()
      if (document.getElementsByClassName('msg_error').length > 0) return
      if (!this.checkSysAuthRulesWay()) return
      let con = {}
      con = _.cloneDeep(this.configData)
      con.lockedIsEnable = this.dealYN(this.configData.lockedIsEnable)
      con.sliderVerification = this.dealYN(this.configData.sliderVerification)
      con.intervalTime = parseInt(this.configData.intervalTime * 60)
      con.lockedTime = parseInt(this.configData.lockedTime * 60)
      this.isLoading = true
      try {
        await configApi.updateAuthRules(con)
        await this.initData()
        this.$message.success('配置生效！')
        this.isLoading = false
      } catch (error) {
        this.isLoading = false
      }
    },
    checkSysAuthRulesWay() {
      // if (!this.configData.sysAuthRulesWayList[0]) return true
      if (!this.configData.sysAuthRulesWayList || this.configData.sysAuthRulesWayList.length === 0) {
        this.$message.error('请添加登录认证方式')
        return false
      }
      if (this.configData.sysAuthRulesWayList[0].authWayName === '' || (this.configData.sysAuthRulesWayList[1] && this.configData.sysAuthRulesWayList[1].authWayName === '')) {
        this.$message.error('请输入认证类型名称')
        return false
      }
      if (!this.configData.sysAuthRulesWayList[0].oneAuthWay || (this.configData.sysAuthRulesWayList[1] && !this.configData.sysAuthRulesWayList[1].oneAuthWay)) {
        this.$message.error('请选择认证因子一')
        return false
      }
      if (this.configData.sysAuthRulesWayList[0].oneAuthWay === this.configData.sysAuthRulesWayList[0].twoAuthWay) {
        this.$message.error('登录认证方式中，认证因子一和认证因子二不能重复')
        return false
      }
      if (!this.configData.sysAuthRulesWayList[1]) return true
      if (this.configData.sysAuthRulesWayList[1].oneAuthWay === this.configData.sysAuthRulesWayList[1].twoAuthWay) {
        this.$message.error('登录认证方式中，认证因子一和认证因子二不能重复')
        return false
      }
      if (this.configData.sysAuthRulesWayList[0].authWayName === this.configData.sysAuthRulesWayList[1].authWayName) {
        this.$message.error('登录认证方式中，认证类型名称不能重复')
        return false
      }
      if (this.configData.sysAuthRulesWayList[0].oneAuthWay === this.configData.sysAuthRulesWayList[1].oneAuthWay) {
        this.$message.error('登录认证方式中，认证因子一不能重复')
        return false
      }
      return true
    },
    dealYN(data) {
      if (data === 'Y') {
        return true
      } else if (data === 'N' || data == null) {
        return false
      } else if (!data) {
        return 'N'
      } else {
        return 'Y'
      }
    },
    initPositiveInteger(data) {
      return positiveInteger(data)
    },
    // 页面假删除
    delData(index) {
      this.configData.sysAuthRulesWayList.splice(index, 1)
    },
    // 点击添加按钮
    addData() {
      const obj = {
        authRuleId: this.configData.authRuleId,
        authWayName: '',
        oneAuthWay: '',
        twoAuthWay: '',
        remark: '',
        isCheck: true,
        isCheck1: true
      }
      this.configData.sysAuthRulesWayList.push(obj)
    }
  }
}
</script>
<style lang="scss" scoped>
//密码配置策略页面样式
.tablediv {
  .msg_item{
    position: relative;
    margin-bottom: 20px;
    .msg_content_flex {
      display: flex;
      .msg_body {
        .el-input {
          width: 80px;
          // margin-left: 16px;
        }
        .msg_company {
          margin-left: 12px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }
        .el-select {
          .el-input {
            width: 120px;
          }
        }
      }
    }
    .msg_error.el-form-item__error{
      padding-left: 20px;
      z-index: 100;
      margin-top: 8px;
    }
    .msg_error{
    ::v-deep .el-input__inner{
      border-color: #F56C6C;
    }
  }
    .msg_tip{
      font-size: 14px;
      color: #999999;
      font-weight: 400;
      margin-left:24px;
      // color:#FFB942;
    }

  }

}
.btn{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 16px;
    }
//说明 提示 文本样式
.msg_tip_red{
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
/* 搜索栏 */
.glo-topsearch{
  padding:0 170px;
  height:80px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
}
.glo-topsearch > div:nth-child(2){
  display: flex;
  overflow: hidden;
}
.top-title{
  position: relative;
  /* border-left:4px solid #5688E8; */
  padding-left: 12px;
  height: 20px;
  color: #666;
  font-weight: bold;
  line-height: 20px;
  margin: 24px 0;
  white-space: nowrap;
  margin-right: 10px;
 }
 .top-title:after{
  position: absolute;
  content:"";
  height: 14px ;
  left: 0;
  top: 3px;
  width: 4px;
  border-left:4px solid #5688E8;
 }
 .top-title-noborder:after{
  border-left:none;
  content:"";
 }
.glo-topsearch .el-input{
  width: 200px;
  margin-right:10px;
}
/* table */
.tablediv{
  position: relative;
  height:calc(100% - 160px);
  padding:0 40px;
  padding-bottom:10px;
}
/* 描述 */
  .tablediv .msgtitle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 64px;
    // background: #fafafa;
    // padding-left: 20px;
    box-sizing: border-box;
    color: #333;
    font-weight: bold;
    line-height: 64px;
    border-bottom:solid 1px #efefef;
    padding-bottom: 8px;
  }
  .lockBox{
    -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
  }
  .tablediv .msgcontent{
    width: 100%;
    height: 56px;
    background: #fff;
    padding-left: 20px;
    box-sizing: border-box;
    color: #333;
    line-height: 56px;
    margin-top: 16px;
    // margin-bottom:16px;
    // border-bottom:solid 1px #efefef;
  }
  .tablediv .msg:before{
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }

  .tablediv .msgcontent:hover{
     background: #F0F4FB;
  }
  .tablediv .msgcontent .msgname{
    float: left;
    color:#999;
    // width: 176px;
  }
  .tablediv .msgcontent .msg_label{
    float: left;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    padding-right: 16px;
    // line-height: 56px;
    // margin-bottom: 16px;
  }
  .tablediv .msgcontentdes{
    display: inline-block;
    width:calc(100% - 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  // .el-checkbox__label{
  //   line-height: 56px;
  // }

</style>
